<!DOCTYPE html>
<html style="display: none;" lang="zh">
    <head>
    <meta charset="utf-8">
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.5.2 -->
    <script>
        window.materialVersion = "1.5.2"
        // Delete localstorage with these tags
        window.oldVersion = [
            'codestartv1',
            '1.3.4',
            '1.4.0',
            '1.4.0b1',
            '1.5.0'
        ]
    </script>

    <!-- dns prefetch -->
    <meta http-equiv="x-dns-prefetch-control" content="on">


    <link rel="dns-prefetch" href="https://cdn1.lncld.net"/>













    <!-- Meta & Info -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <!-- Title -->
    
    <title>
        
            bootstrap-table | 
        
        Selton Blog
    </title>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/header/Taurus.png">
    <link rel="icon" href="/img/favicon.png">

    <meta name="format-detection" content="telephone=no"/>
    <meta name="description" itemprop="description" content="">
    <meta name="keywords" content="docker使用入门教程,bootstrap,bootstrap-table">
    <meta name="theme-color" content="#0097A7">

    <!-- Disable Fucking Bloody Baidu Tranformation -->
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import lsloader -->
    <script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(a){try{localStorage.removeItem(a)}catch(b){}};lsloader.setLS=function(a,c){try{localStorage.setItem(a,c)}catch(b){}};lsloader.getLS=function(a){var c="";try{c=localStorage.getItem(a)}catch(b){c=""}return c};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var b=[];for(var a=0;a<localStorage.length;a++){b.push(localStorage.key(a))}b.forEach(function(e){var f=lsloader.getLS(e);if(window.oldVersion){var d=window.oldVersion.reduce(function(g,h){return g||f.indexOf("/*"+h+"*/")!==-1},false);if(d){lsloader.removeLS(e)}}})}catch(c){}};lsloader.clean();lsloader.load=function(f,a,b,d){if(typeof b==="boolean"){d=b;b=undefined}d=d||false;b=b||function(){};var e;e=this.getLS(f);if(e&&e.indexOf(versionString)===-1){this.removeLS(f);this.requestResource(f,a,b,d);return}if(e){var c=e.split(versionString)[0];if(c!=a){console.log("reload:"+a);this.removeLS(f);this.requestResource(f,a,b,d);return}e=e.split(versionString)[1];if(d){this.jsRunSequence.push({name:f,code:e});this.runjs(a,f,e)}else{document.getElementById(f).appendChild(document.createTextNode(e));b()}}else{this.requestResource(f,a,b,d)}};lsloader.requestResource=function(b,e,a,c){var d=this;if(c){this.iojs(e,b,function(h,f,g){d.setLS(f,h+versionString+g);d.runjs(h,f,g)})}else{this.iocss(e,b,function(f){document.getElementById(b).appendChild(document.createTextNode(f));d.setLS(b,e+versionString+f)},a)}};lsloader.iojs=function(d,b,g){var a=this;a.jsRunSequence.push({name:b,code:""});try{var f=new XMLHttpRequest();f.open("get",d,true);f.onreadystatechange=function(){if(f.readyState==4){if((f.status>=200&&f.status<300)||f.status==304){if(f.response!=""){g(d,b,f.response);return}}a.jsfallback(d,b)}};f.send(null)}catch(c){a.jsfallback(d,b)}};lsloader.iocss=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.iofonts=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.runjs=function(f,c,e){if(!!c&&!!e){for(var b in this.jsRunSequence){if(this.jsRunSequence[b].name==c){this.jsRunSequence[b].code=e}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var a=document.createElement("script");a.appendChild(document.createTextNode(this.jsRunSequence[0].code));a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else{if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var d=this;var a=document.createElement("script");a.src=this.jsRunSequence[0].path;a.type="text/javascript";this.jsRunSequence[0].status="loading";a.onload=function(){d.jsRunSequence.shift();if(d.jsRunSequence.length>0){d.runjs()}};document.body.appendChild(a)}}};lsloader.tagLoad=function(b,a){this.jsRunSequence.push({name:a,code:"",path:b,status:"failed"});this.runjs()};lsloader.jsfallback=function(c,b){if(!!this.jsnamemap[b]){return}else{this.jsnamemap[b]=b}for(var a in this.jsRunSequence){if(this.jsRunSequence[a].name==b){this.jsRunSequence[a].code="";this.jsRunSequence[a].status="failed";this.jsRunSequence[a].path=c}}this.runjs()};lsloader.cssfallback=function(e,c,b){if(!!this.cssnamemap[c]){return}else{this.cssnamemap[c]=1}var d=document.createElement("link");d.type="text/css";d.href=e;d.rel="stylesheet";d.onload=d.onerror=b;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(d,a)};lsloader.runInlineScript=function(c,b){var a=document.getElementById(b).innerText;this.jsRunSequence.push({name:c,code:a});this.runjs()}})();</script>

    <!-- Import queue -->
    <script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>

    <!-- Import CSS -->
    
        <style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
        <style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>

        

    

    

    <!-- Config CSS -->

<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    overflow-x: hidden !important;
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }

</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-color: #F5F5F5;
      }

      /* blog_info bottom background */
      #scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
        background-color: #fff;
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>


<!-- Import Font -->
<!-- Import Roboto -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


<!-- Import Material Icons -->


    <style id="material_icons"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_icons","/css/material-icons.css?pqhB/Rd/ab0H2+kZp0RDmw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>




    <!-- Import jQuery -->
    
        <script>lsloader.load("jq_js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==", true)</script>
    

    <!-- WebAPP Icons -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Selton Blog">
    <meta name="msapplication-starturl" content="https://selton.cn/bootstrap-table.html">
    <meta name="msapplication-navbutton-color" content="#0097A7">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="Selton Blog">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!-- Site Verification -->
    
    

    <!-- RSS -->
    

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="https://selton.cn/bootstrap-table.html">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="bootstrap-table | Selton Blog">
    <meta property="og:image" content="/img/favicon.png">
    <meta property="og:description" content="">
    <meta property="og:article:tag" content="bootstrap"> <meta property="og:article:tag" content="bootstrap-table"> 

    
        <meta property="article:published_time" content="Wed Sep 26 2018 00:11:48 GMT+0800">
        <meta property="article:modified_time" content="Fri Jan 04 2019 10:21:29 GMT+0800">
    

    <!-- The Twitter Card protocol -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- Add canonical link for SEO -->
    
        <link rel="canonical" href="https://selton.cn/bootstrap-table.html" />
    

    <!-- Structured-data for SEO -->
    
        


<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": "https://selton.cn/bootstrap-table.html",
    "headline": "bootstrap-table",
    "datePublished": "Wed Sep 26 2018 00:11:48 GMT+0800",
    "dateModified": "Fri Jan 04 2019 10:21:29 GMT+0800",
    "author": {
        "@type": "Person",
        "name": "Selton",
        "image": {
            "@type": "ImageObject",
            "url": "/img/zh.jpg"
        },
        "description": "你的痛苦俯仰皆是,你的惆怅人皆有之."
    },
    "publisher": {
        "@type": "Organization",
        "name": "Selton Blog",
        "logo": {
            "@type":"ImageObject",
            "url": "/img/favicon.png"
        }
    },
    "keywords": ",bootstrap,bootstrap-tabledocker使用入门教程",
    "description": "",
}
</script>


    

    <!-- Analytics -->
    
    
        <script>
    var _hmt = _hmt || [];
    (function() {var hm = document.createElement('script');
    hm.src = 'https://hm.baidu.com/hm.js?be5a31edaf6d767c1c2470bc9337ac65';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(hm, s);
    })();
</script>
    
    

    <!-- Custom Head -->
    

</head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->


    <!-- Left aligned menu below button -->
    
    
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#quick-start"><span class="post-toc-number">1.</span> <span class="post-toc-text">quick-start</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#why-use"><span class="post-toc-number">2.</span> <span class="post-toc-text">why-use</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#whats-included"><span class="post-toc-number">3.</span> <span class="post-toc-text">whats-included</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#details"><span class="post-toc-number">4.</span> <span class="post-toc-text">details</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#url"><span class="post-toc-number">4.0.1.</span> <span class="post-toc-text">url</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#method"><span class="post-toc-number">4.0.2.</span> <span class="post-toc-text">method</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#queryParams"><span class="post-toc-number">4.0.3.</span> <span class="post-toc-text">queryParams</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#pageSize"><span class="post-toc-number">4.0.4.</span> <span class="post-toc-text">pageSize</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#pageNumber"><span class="post-toc-number">4.0.5.</span> <span class="post-toc-text">pageNumber</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#contentType"><span class="post-toc-number">4.0.6.</span> <span class="post-toc-text">contentType</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#columns"><span class="post-toc-number">4.0.7.</span> <span class="post-toc-text">columns</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#jsonstyle"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">jsonstyle</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#offset"><span class="post-toc-number">4.1.1.</span> <span class="post-toc-text">offset</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#limit"><span class="post-toc-number">4.1.2.</span> <span class="post-toc-text">limit</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#sql示例"><span class="post-toc-number">4.1.3.</span> <span class="post-toc-text">sql示例</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#表格绑定事件"><span class="post-toc-number">4.1.4.</span> <span class="post-toc-text">表格绑定事件</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#editable"><span class="post-toc-number">5.</span> <span class="post-toc-text">editable</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#start-editable"><span class="post-toc-number">5.0.1.</span> <span class="post-toc-text">start editable</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#details-editable"><span class="post-toc-number">5.0.2.</span> <span class="post-toc-text">details editable</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#moreEditable"><span class="post-toc-number">5.0.3.</span> <span class="post-toc-text">moreEditable</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#demo"><span class="post-toc-number">5.0.4.</span> <span class="post-toc-text">demo</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#web-xml"><span class="post-toc-number">5.0.5.</span> <span class="post-toc-text">web-xml</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#html-demo"><span class="post-toc-number">5.0.6.</span> <span class="post-toc-text">html-demo</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#js-demo"><span class="post-toc-number">5.0.7.</span> <span class="post-toc-text">js-demo</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#server-demo"><span class="post-toc-number">5.0.8.</span> <span class="post-toc-text">server-demo</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#注意"><span class="post-toc-number">5.0.9.</span> <span class="post-toc-text">注意</span></a></li></ol></li></ol></li></ol>
    </ul>
    




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script type="text/ls-javascript" id="post-thumbnail-script">
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
    $('.post_thumbnail-random').addClass('lazy');
</script>

        
    
            <p class="article-headline-p">
                bootstrap-table
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/zh.jpg" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>Selton</strong>
        <span>9月 26, 2018</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/bootstrap/">bootstrap</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/bootstrap-table/">bootstrap-table</a>
    </ul>
    

    <!-- Share -->
    
        <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    
    <!-- Leancloud Views -->
        <a class="post_share-link" href="#">
            <li class="mdl-menu__item">
                <span id="/bootstrap-table.html" class="leancloud-views_num" data-flag-title="bootstrap-table">
     &nbsp;浏览量
</span>

            </li>
        </a>
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=bootstrap-table&url=https://selton.cn/bootstrap-table.html&pic=https://selton.cn/img/header/Taurus.png&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=bootstrap-table&url=https://selton.cn/bootstrap-table.html&via=Selton" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=https://selton.cn/bootstrap-table.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=https://selton.cn/bootstrap-table.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    

    <!-- Share Telegram -->
    
</ul>

    
</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <p>bootstrap-table是一个基于Bootstrap的jQuery插件,可以实现将数据库中提取到数据在前端进行相应操作的功能</p>
<h2 id="quick-start"><a href="#quick-start" class="headerlink" title="quick-start"></a>quick-start</h2><blockquote>
<p>对本文有什么疑问或者建议,可以在下方的评论区说明,笔者会尽能力给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过一段时间更新,还有侧边栏的动态生成(bootstrap-treeview)也是在学习当中  </p>
</blockquote>
<p>快速使用:</p>
<ul>
<li><a href="https://github.com/seltonGitHub/helloBootTable" target="_blank" rel="noopener">Download bootstrap-table hello demo</a></li>
<li><a href="#demo">预览前端demo代码</a></li>
<li>Clone the repo: <code>git clone https://github.com/seltonGitHub/helloBootTable.git</code></li>
</ul>
<p>没有配置java环境,移步<a href="https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html" target="_blank" rel="noopener">JDK安装与环境变量配置</a>;<br>没有配置tomcat环境,移步<a href="https://jingyan.baidu.com/article/2c8c281daa77aa0008252aff.html" target="_blank" rel="noopener">tomcat的下载和安装配置</a>;<br>没有下载配置idea环境,移步<a href="https://jingyan.baidu.com/article/afd8f4debd60f434e286e91f.html" target="_blank" rel="noopener">IntelliJ IDEA安装以及配置</a>;  </p>
<h2 id="why-use"><a href="#why-use" class="headerlink" title="why-use"></a>why-use</h2><ul>
<li>学习成本低,配置简单,文档齐全</li>
<li>与Bootstrap无缝衔接,整体风格一致,也便于二次开发</li>
<li>开发者活跃,Github定期维护</li>
</ul>
<h2 id="whats-included"><a href="#whats-included" class="headerlink" title="whats-included"></a>whats-included</h2><p>file list:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">bootstrapDemo/</span><br><span class="line">├── web/</span><br><span class="line">│   ├── js</span><br><span class="line">│   ├── WEB-INF</span><br><span class="line">│   └── bootindex.html</span><br><span class="line">└── src/</span><br><span class="line">│   └── DataSendServlet.java</span><br></pre></td></tr></table></figure>
<p>表单展示页面 (<code>bootindex.html</code>)<br>javascript文件 (<code>showOrder.js</code>)从服务器取得数据,然后渲染表格  </p>
<h2 id="details"><a href="#details" class="headerlink" title="details"></a>details</h2><pre><code>$(&quot;#table&quot;).bootstrapTable({
  method: &quot;post&quot;,
  url: &quot;获取后台数据的url&quot;,
  ... ...

});   
</code></pre><p>这里的js语句的所有渲染操作是针对html页面中的id为table的一个table,所以不要忘了在导入了该js的html中构建出id为table的table  </p>
<p>bootstrap-table中的重要键值的简单解释:  </p>
<ul>
<li><a href="#url">url(必须修改)</a></li>
<li><a href="#method">method</a></li>
<li><a href="#pageSize">pageSize(必须修改)</a>  </li>
<li><a href="#jsonstyle">jsonstyle(必须修改)</a></li>
<li><a href="#columns">columns(必须修改)</a></li>
<li><a href="#contentType">contentType(必须填写)</a></li>
<li><a href="#queryParams">queryParams</a></li>
<li><a href="#pageNumber">pageNumber</a></li>
<li><a href="#表格绑定事件">表格绑定事件</a></li>
</ul>
<p><code>showorder.js</code>会向服务器发起ajax访问  </p>
<p><code>bootstrapTable</code>构建元素解析:  </p>
<h4 id="url"><a href="#url" class="headerlink" title="url"></a>url</h4><pre><code>$(&quot;#table&quot;).bootstrapTable({
  method: &quot;post&quot;,
  url: &quot;获取后台数据的url&quot;,
  ... ...

}); 
</code></pre><p>ajax访问到的后台路径(必须),该后台需要按照指定的<a href="#jsonstyle">json</a> 格式返回数据</p>
<h4 id="method"><a href="#method" class="headerlink" title="method"></a>method</h4><p>get发送的数据在请求报文的请求行,也就是url部分,而且参数如果有中文会出现乱码问题,而post发送的数据在报文实体,都应该是post,表单的提交也一般都是post</p>
<h4 id="queryParams"><a href="#queryParams" class="headerlink" title="queryParams"></a>queryParams</h4><p>不需要任何修改,相当于ajax中的data键,上面的method决定这些参数传递给后台的的传递方式.发送给后台的数据,给出实现表单分页的两个参数,<a href="#offset">offset</a>和<a href="#limit">limit</a>,在<code>oTableInit.queryParams</code>中给出,后台用<code>request.getParameter()</code>的方式拿到queryParams中传递过来的值,然后制定dao  </p>
<h4 id="pageSize"><a href="#pageSize" class="headerlink" title="pageSize"></a>pageSize</h4><p>当前table一次最多显示多少行,也就是你的table的一页应该展现多少行,必须  </p>
<h4 id="pageNumber"><a href="#pageNumber" class="headerlink" title="pageNumber"></a>pageNumber</h4><p>起始页,一般是1不用改,这个和pageSize决定了queryParams中的offset的值,<code>offset=(pageNow - 1)   * pageSize,limit=pageSize</code></p>
<h4 id="contentType"><a href="#contentType" class="headerlink" title="contentType"></a>contentType</h4><p><code>contentType: &quot;application/x-www-form-urlencoded&quot;</code></p>
<h4 id="columns"><a href="#columns" class="headerlink" title="columns"></a>columns</h4><pre><code>$(&quot;#table&quot;).bootstrapTable({
  method: &quot;post&quot;,
  url: &quot;获取后台数据的url&quot;,
  data: [
        {field: &apos;testId&apos;, title: &apos;ID&apos;},
        {field: &apos;testName&apos;, title: &apos;姓名&apos;},
        {field: &apos;testPassword&apos;, title: &apos;密码&apos;}
        ]  
      ... ...
  ]
});  
</code></pre><p>你的table的表结构,以上例子表示表有三列,列的实际显示名字分别是ID,姓名,密码,但是field代表实际数据的名字,表中的数据是由于ajax向服务器发起访问,服务器返回给的数据中的rows的每一个json对象的键都会对应到field的列中—–<a href="#jsonstyle">服务器返还的值</a></p>
<h3 id="jsonstyle"><a href="#jsonstyle" class="headerlink" title="jsonstyle"></a>jsonstyle</h3><pre><code>{  
&quot;total&quot;:25,  
    &quot;rows&quot;:[
        {
        &quot;testID&quot;:1,
        &quot;testName&quot;:&quot;xiaoming1&quot;,
        &quot;testPassword&quot;:&quot;xiaomingpwd1&quot;
        },
        {
        &quot;testID&quot;:2,
        &quot;testName&quot;:&quot;xiaoming2&quot;,
        &quot;testPassword&quot;:&quot;xiaomingpwd2&quot;
        }
    ]
}    
</code></pre><p>数据库返还给发起访问的ajax的数据,必须满足,包含两个json形式的键值对,<br>一个是total键,值为表单拥有者在数据库中的全部数据的数量(行数),这个数据和pageSize决定table展示的页面有多少页,另一个是rows键,值为多个json对象,rows的每一个json对象就是当前table页的一行实体展示,这里的rows相当于会给前端table两行数据,testID,testName,testPassword分别会被填入到table中的field对应的列中—–<a href="#columns">前端接收到值表现</a></p>
<h4 id="offset"><a href="#offset" class="headerlink" title="offset"></a>offset</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">oTableInit.queryParams = <span class="function"><span class="keyword">function</span> (<span class="params">params</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> temp = &#123;   <span class="comment">//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的</span></span><br><span class="line">        limit: params.limit,    <span class="comment">//params.limit,   页面大小</span></span><br><span class="line">        offset: params.offset,</span><br><span class="line">        testNum: <span class="number">445</span>,</span><br><span class="line">        testNum1: <span class="number">343</span></span><br><span class="line">    &#125;;</span><br></pre></td></tr></table></figure>
<p>offset=(<a href="#pageNumber">pageNumber</a> - 1) * <a href="#pageSize">pageSize</a>,是会被发送到后台使用的数据,<a href="#sql示例">后台数据提取sql语句示例</a>  </p>
<h4 id="limit"><a href="#limit" class="headerlink" title="limit"></a>limit</h4><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">    oTableInit.queryParams = <span class="function"><span class="keyword">function</span> (<span class="params">params</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> temp = &#123;   <span class="comment">//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的</span></span><br><span class="line">            limit: params.limit,    <span class="comment">//params.limit,   页面大小</span></span><br><span class="line">            offset: params.offset,</span><br><span class="line">            testNum: <span class="number">445</span>,</span><br><span class="line">            testNum1: <span class="number">343</span></span><br><span class="line">        &#125;;</span><br><span class="line">limit=[pageSize](#pageSize),是会被发送到后台使用的数据,[后台数据提取sql语句示例](#sql示例)</span><br></pre></td></tr></table></figure>
<h4 id="sql示例"><a href="#sql示例" class="headerlink" title="sql示例"></a>sql示例</h4><p><code>SELECT * FROM test WHERE id = ? LIMIT offset,limit</code>  </p>
<h4 id="表格绑定事件"><a href="#表格绑定事件" class="headerlink" title="表格绑定事件"></a>表格绑定事件</h4><p>用于测试ajax返回的数据是最好的  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#table"</span>).bootstrapTable(&#123;</span><br><span class="line">      method: <span class="string">"post"</span>,</span><br><span class="line">      url: <span class="string">"获取后台数据的url"</span>,</span><br><span class="line">      onLoadSuccess: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;  <span class="comment">//加载成功时执行</span></span><br><span class="line">            <span class="built_in">console</span>.info(<span class="string">"加载成功"</span>);</span><br><span class="line">      &#125;,</span><br><span class="line">      onLoadError: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;  <span class="comment">//加载失败时执行</span></span><br><span class="line">            <span class="built_in">console</span>.info(<span class="string">"加载数据失败"</span>);</span><br><span class="line">      &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>关于事件,更为详细的介绍请访问<a href="http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6" target="_blank" rel="noopener">boottableDoc</a>  </p>
<h2 id="editable"><a href="#editable" class="headerlink" title="editable"></a>editable</h2><p><strong>这是在操作table吗,感觉就像是数据库展现在了页面上</strong></p>
<p>如果你已经阅读完或者已经在自己代码中实现了上述功能,但是table存在的目的本来就不应该只是展现,应该还有寻常的CRUD,精力有限,只是实践了update,笔者使用的是行内编辑的方式实现的update,需要用到另一个工具X-editable,不过还好boottable有这样的插件,将x-editable封装整合到了当中,只需要引入<code>https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js</code>  </p>
<ul>
<li><a href="#start-editable">快速使用</a></li>
<li><a href="#details-editable">方法详解</a></li>
<li><a href="#moreEditable">关于editable的语法的细节</a></li>
<li><a href="http://vitalets.github.io/x-editable/demo-bs3.html" target="_blank" rel="noopener">x-editableDemo在线展示</a></li>
</ul>
<h4 id="start-editable"><a href="#start-editable" class="headerlink" title="start editable"></a>start editable</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#table"</span>).bootstrapTable(&#123;</span><br><span class="line">  method: <span class="string">"post"</span>,</span><br><span class="line">  url: <span class="string">"获取后台数据的url"</span>,</span><br><span class="line">       [</span><br><span class="line">       &#123;<span class="attr">field</span>: <span class="string">'testId'</span>,</span><br><span class="line">       title: <span class="string">'ID'</span>,</span><br><span class="line">       editable: &#123;<span class="attr">mode</span>: <span class="string">'popup'</span>&#125;</span><br><span class="line">       &#125;,</span><br><span class="line">       &#123;<span class="attr">field</span>: <span class="string">'testName'</span>, </span><br><span class="line">       title: <span class="string">'姓名'</span>&#125;,</span><br><span class="line">       &#123;<span class="attr">field</span>: <span class="string">'testPassword'</span>, </span><br><span class="line">       title: <span class="string">'密码'</span>&#125;</span><br><span class="line">       ]  </span><br><span class="line">      ... ...</span><br><span class="line">  ]</span><br><span class="line">&#125;);  </span><br><span class="line"></span><br><span class="line">   onEditableSave: <span class="function"><span class="keyword">function</span> (<span class="params">field, row, oldValue, $el</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">       $.ajax(&#123;</span><br><span class="line">           type: <span class="string">"post"</span>,</span><br><span class="line">           url: <span class="string">"/ordercenter/updateOrder.json"</span>,</span><br><span class="line">           data: &#123;</span><br><span class="line">               orderid: row.orderid,</span><br><span class="line">               updateCol: field,</span><br><span class="line">               updateVal: <span class="built_in">eval</span>(<span class="string">'row.'</span>+field)</span><br><span class="line">           &#125;,</span><br><span class="line">           dataType: <span class="string">'JSON'</span>,</span><br><span class="line">           success: <span class="function"><span class="keyword">function</span> (<span class="params">data, status</span>) </span>&#123;</span><br><span class="line">               <span class="built_in">console</span>.log(data);</span><br><span class="line">               <span class="keyword">if</span> (status == <span class="string">"success"</span>) &#123;</span><br><span class="line">                   alert(<span class="string">'旧数据: 订单号: '</span> + row.orderid + <span class="string">' '</span> + field + <span class="string">': '</span> + oldValue + <span class="string">'\r\n'</span></span><br><span class="line">                   + <span class="string">'更新后的数据: 订单号: '</span> + data.updateId + <span class="string">' '</span> + data.updateCol + <span class="string">': '</span> + data.updateVal)</span><br><span class="line">               &#125;</span><br><span class="line">           &#125;,</span><br><span class="line">           error: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">               alert(<span class="string">'编辑失败'</span>);</span><br><span class="line">           &#125;,</span><br><span class="line">           complete: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">           &#125;</span><br><span class="line"></span><br><span class="line">       &#125;);</span><br><span class="line">   &#125;,</span><br></pre></td></tr></table></figure>
<h4 id="details-editable"><a href="#details-editable" class="headerlink" title="details editable"></a>details editable</h4><p>编辑后的提交方法统一放到<code>onEditableSave</code>事件里面统一处理</p>
<p>例子: 页面table中的列姓名,field为testName,实际的值为xiaoming1,通过修改将其改为xiaoming2,这时候field为testName,row为一个json,键值对分别为该行的所有键值组合,oldValue为xiaoming1<br>更为详细的描述请到<a href="http://vitalets.github.io/x-editable/" target="_blank" rel="noopener">x-editable</a>  </p>
<p>建议读者直接使用我的<code>onEditableSave</code>,它向后台发送了三个数据精确完成update,行特定标识和列特定标识定位到修改了哪一个具体的数据,再给出updateVal指出原本的数据被修改成了updateVal </p>
<h4 id="moreEditable"><a href="#moreEditable" class="headerlink" title="moreEditable"></a>moreEditable</h4><p>editable中的mode的值一般是popup,翻译是弹出的意思,也可以使用inline值,但是点击并且编辑的时候会使表格样式发生改变,而popup则不会</p>
<h4 id="demo"><a href="#demo" class="headerlink" title="demo"></a>demo</h4><ul>
<li><a href="#web-xml">web-xml</a></li>
<li><a href="#html-demo">html代码</a></li>
<li><a href="#js-demo">js代码</a></li>
<li><a href="#server-demo">后台代码</a></li>
</ul>
<h4 id="web-xml"><a href="#web-xml" class="headerlink" title="web-xml"></a>web-xml</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="UTF-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">web-app</span> <span class="attr">xmlns</span>=<span class="string">"http://xmlns.jcp.org/xml/ns/javaee"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">xmlns:xsi</span>=<span class="string">"http://www.w3.org/2001/XMLSchema-instance"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">xsi:schemaLocation</span>=<span class="string">"http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">version</span>=<span class="string">"4.0"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">welcome-file-list</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">welcome-file</span>&gt;</span>/bootindex.html<span class="tag">&lt;/<span class="name">welcome-file</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">welcome-file-list</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">servlet</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">servlet-name</span>&gt;</span>DataSendServlet<span class="tag">&lt;/<span class="name">servlet-name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">servlet-class</span>&gt;</span>com.selton.DataSendServlet<span class="tag">&lt;/<span class="name">servlet-class</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">servlet</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">servlet-mapping</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">servlet-name</span>&gt;</span>DataSendServlet<span class="tag">&lt;/<span class="name">servlet-name</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">url-pattern</span>&gt;</span>/DataSendServlet<span class="tag">&lt;/<span class="name">url-pattern</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">servlet-mapping</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">web-app</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="html-demo"><a href="#html-demo" class="headerlink" title="html-demo"></a>html-demo</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span> <span class="attr">src</span>=<span class="string">"/js/showOrder.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">"JavaScript"</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">        $(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">            <span class="comment">//1.初始化Table</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> oTable = <span class="keyword">new</span> TableInit();</span></span><br><span class="line"><span class="undefined">            oTable.Init();</span></span><br><span class="line"><span class="undefined">        &#125;);</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">id</span>=<span class="string">"Table"</span>&gt;</span><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="js-demo"><a href="#js-demo" class="headerlink" title="js-demo"></a>js-demo</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> TableInit = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> oTableInit = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line"><span class="comment">//初始化Table</span></span><br><span class="line">oTableInit.Init = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $(<span class="string">'#Table'</span>).bootstrapTable(&#123;</span><br><span class="line"></span><br><span class="line">        url: <span class="string">'/DataSendServlet'</span>,         <span class="comment">//请求后台的URL（*）</span></span><br><span class="line"></span><br><span class="line">        method: <span class="string">'get'</span>,                      <span class="comment">//请求方式（*）</span></span><br><span class="line">		<span class="keyword">async</span>:  <span class="literal">true</span>,                        <span class="comment">//true表示执行到这,ajax向后台发起访问,在等待响应的这段时间里,继续执行下面的代码</span></span><br><span class="line">                                                <span class="comment">//设置为true,基本都是后面的代码(除非还有ajax)先执行</span></span><br><span class="line">		</span><br><span class="line"></span><br><span class="line">        <span class="comment">// toolbar: '#toolbar',                //工具按钮用哪个容器</span></span><br><span class="line"></span><br><span class="line">        striped: <span class="literal">true</span>,                      <span class="comment">//是否显示行间隔色</span></span><br><span class="line"></span><br><span class="line">        cache: <span class="literal">false</span>,                       <span class="comment">//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）</span></span><br><span class="line"></span><br><span class="line">        pagination: <span class="literal">true</span>,                   <span class="comment">//是否显示分页（*）</span></span><br><span class="line"></span><br><span class="line">        queryParams: oTableInit.queryParams,<span class="comment">//传递参数（*）</span></span><br><span class="line"></span><br><span class="line">        sidePagination: <span class="string">"server"</span>,           <span class="comment">//分页方式：client客户端分页，server服务端分页（*）</span></span><br><span class="line"></span><br><span class="line">        paginationPreText:<span class="string">'&lt;'</span>,              <span class="comment">//上一页按钮样式</span></span><br><span class="line"></span><br><span class="line">        paginationNextText:<span class="string">'&gt;'</span>,             <span class="comment">//下一页按钮样式</span></span><br><span class="line"></span><br><span class="line">        pageNumber: <span class="number">1</span>,                       <span class="comment">//初始化加载第一页，默认第一页</span></span><br><span class="line"></span><br><span class="line">        pageSize: <span class="number">10</span>,                       <span class="comment">//每页的记录行数（*）</span></span><br><span class="line"></span><br><span class="line">        pageList: [<span class="number">10</span>, <span class="number">25</span>, <span class="number">50</span>, <span class="number">100</span>],        <span class="comment">//可供选择的每页的行数（*）</span></span><br><span class="line"></span><br><span class="line">        contentType: <span class="string">"application/x-www-form-urlencoded"</span>,   <span class="comment">//重要选项,必填</span></span><br><span class="line"></span><br><span class="line">        showColumns: <span class="literal">true</span>,                  <span class="comment">//是否显示所有的列</span></span><br><span class="line"></span><br><span class="line">        showRefresh: <span class="literal">true</span>,                  <span class="comment">//是否显示刷新按钮</span></span><br><span class="line"></span><br><span class="line">        minimumCountColumns: <span class="number">2</span>,             <span class="comment">//最少允许的列数</span></span><br><span class="line"></span><br><span class="line">        clickToSelect: <span class="literal">true</span>,                <span class="comment">//是否启用点击选中行</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">//height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度,最好不要设置这个属性</span></span><br><span class="line"></span><br><span class="line">        uniqueId: <span class="string">"no"</span>,                     <span class="comment">//每一行的唯一标识，一般为主键列</span></span><br><span class="line"></span><br><span class="line">        showToggle: <span class="literal">true</span>,                    <span class="comment">//是否显示详细视图和列表视图的切换按钮</span></span><br><span class="line"></span><br><span class="line">        cardView: <span class="literal">false</span>,                    <span class="comment">//是否显示详细视图</span></span><br><span class="line"></span><br><span class="line">        detailView: <span class="literal">false</span>,                   <span class="comment">//是否显示父子表</span></span><br><span class="line"></span><br><span class="line">        columns: [</span><br><span class="line">            &#123;</span><br><span class="line">                field: <span class="string">'testId'</span>,</span><br><span class="line">                title: <span class="string">'ID'</span>,</span><br><span class="line">                editable: &#123;</span><br><span class="line">                    mode: <span class="string">'inline'</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;, &#123;</span><br><span class="line"></span><br><span class="line">                field: <span class="string">'testName'</span>,</span><br><span class="line">                title: <span class="string">'用户名'</span></span><br><span class="line">            &#125;, &#123;</span><br><span class="line"></span><br><span class="line">                field: <span class="string">'testPassword'</span>,</span><br><span class="line">                title: <span class="string">'密码'</span></span><br><span class="line">            &#125;</span><br><span class="line">        ],</span><br><span class="line">        rowStyle: <span class="function"><span class="keyword">function</span> (<span class="params">row, index</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> classesArr = [<span class="string">'success'</span>, <span class="string">'info'</span>];</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> strclass = <span class="string">""</span>;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">if</span> (index % <span class="number">2</span> === <span class="number">0</span>) &#123;<span class="comment">//偶数行</span></span><br><span class="line"></span><br><span class="line">                strclass = classesArr[<span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;<span class="comment">//奇数行</span></span><br><span class="line"></span><br><span class="line">                strclass = classesArr[<span class="number">1</span>];</span><br><span class="line"></span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">return</span> &#123;<span class="attr">classes</span>: strclass&#125;;</span><br><span class="line"></span><br><span class="line">        &#125;,<span class="comment">//隔行变色</span></span><br><span class="line"></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//得到查询的参数</span></span><br><span class="line"></span><br><span class="line">oTableInit.queryParams = <span class="function"><span class="keyword">function</span> (<span class="params">params</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> temp = &#123;   <span class="comment">//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的</span></span><br><span class="line">        limit: params.limit,    <span class="comment">//params.limit,   页面大小</span></span><br><span class="line">        offset: params.offset,</span><br><span class="line">        testNum: <span class="number">445</span>,</span><br><span class="line">        testNum1: <span class="number">343</span></span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> temp;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">return</span> oTableInit;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h4 id="server-demo"><a href="#server-demo" class="headerlink" title="server-demo"></a>server-demo</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.selton;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> javax.servlet.ServletException;</span><br><span class="line"><span class="keyword">import</span> javax.servlet.annotation.WebServlet;</span><br><span class="line"><span class="keyword">import</span> javax.servlet.http.HttpServlet;</span><br><span class="line"><span class="keyword">import</span> javax.servlet.http.HttpServletRequest;</span><br><span class="line"><span class="keyword">import</span> javax.servlet.http.HttpServletResponse;</span><br><span class="line"><span class="keyword">import</span> java.io.IOException;</span><br><span class="line"><span class="keyword">import</span> java.util.Enumeration;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span> seltonzyf@gmail.com</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@date</span> 2018/5/10 13:59</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="meta">@WebServlet</span>(name = <span class="string">"DataSendServlet"</span>)</span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">DataSendServlet</span> <span class="keyword">extends</span> <span class="title">HttpServlet</span> </span>&#123;</span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">doPost</span><span class="params">(HttpServletRequest request, HttpServletResponse response)</span> <span class="keyword">throws</span> ServletException, IOException </span>&#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="comment">//这里输出后台从ajax拿到的数据</span></span><br><span class="line">        Enumeration&lt;String&gt; parameterNames = request.getParameterNames();</span><br><span class="line">        <span class="keyword">while</span> (parameterNames.hasMoreElements()) &#123;</span><br><span class="line">            String s = parameterNames.nextElement();</span><br><span class="line">            String parameter = request.getParameter(s);</span><br><span class="line">            System.out.println(<span class="string">"s = "</span> + s);</span><br><span class="line">            System.out.println(<span class="string">"parameter = "</span> + parameter);</span><br><span class="line">        &#125;</span><br><span class="line">        response.getWriter().print(<span class="string">"&#123;\"total\": 11, \"rows\":[&#123;\"testId\":9, \"testName\":\"selton\", \"testPassword\": 1&#125;]&#125;"</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">doGet</span><span class="params">(HttpServletRequest request, HttpServletResponse response)</span> <span class="keyword">throws</span> ServletException, IOException </span>&#123;</span><br><span class="line">        doPost(request,response);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><ul>
<li>bootstrap-table只能被调用一次的问题</li>
</ul>
<p>在inittable之前</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#table"</span>).bootstrapTable(<span class="string">'destroy'</span>);</span><br></pre></td></tr></table></figure>
<p>清空之前表内数据</p>
<ul>
<li>服务器向前端发送的用于构建表单的json,所有的键都会变成小写</li>
</ul>

        
                <blockquote style="margin: 2em 0 0;padding: 0.5em 1em;border-left: 3px solid #F44336;background-color: #F5F5F5;list-style: none;">
                    <p><strong>
                         
                            转载无须注明出处,就说是自己做的(＝^ω^＝)
                        </strong>
                        <br>
                        <strong>本文链接：</strong><a href="https://selton.cn/bootstrap-table.html">https://selton.cn/bootstrap-table.html</a>
                    </p>
                </blockquote>
        
    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <div id="comment" style='padding:10px;' class="vcomment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
    var GUEST_INFO = ['nick','mail','link'];
    var guest_info = 'nick,mail,link'.split(',').filter(function(item){
        return GUEST_INFO.indexOf(item) > -1
    });
    var notify = 'false' == true;
    var verify = 'false' == true;
    new Valine({
        el: '.vcomment',
        notify: notify,
        verify: verify,
        appId: "bXfVz4s0H1YbOPe8VtjgDWHp-gzGzoHsz",
        appKey: "OJQYQlOupQ3r08BB7AVFOV8o",
        placeholder: "Thank you for reading!",
        pageSize:'10',
        avatar:'identicon',
        lang:'zh-cn'
    });
</script>

                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/Mac-Editor-Vim.html" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/Tutorial-Ali-JavaCodeRule.html" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/zh.jpg" alt="Selton's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        seltonzyf@gmail.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="#" target="_blank" title="Email Me">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        Email Me
                    </a>
                </li>
            
                <li>
                    <a href="https://www.cnblogs.com/selton/" target="_blank" title="博客园">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        博客园
                    </a>
                </li>
            
                <li>
                    <a href="https://www.zhihu.com/people/seltonzyf" target="_blank" title="知乎">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        知乎
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/archives/2019/01/">一月 2019<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/10/">十月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/09/">九月 2018<span class="sidebar_archives-count">4</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                
            </ul>
        </li>
        
    

    <!-- Pages  -->
    

    <!-- Article Number  -->
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->

    <a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
            主题 - Material
            <span class="sidebar-badge badge-circle">i</span>
        </div>
    </a>


<!-- Help & Support -->
<!--

    <a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
        sidebar.help
        <span class="mdl-button__ripple-container">
          <span class="mdl-ripple"></span>
        </span>
      </div>
    </a>

-->

<!-- Feedback -->
<!--

    <a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
        sidebar.feedback
        <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
    </a>

-->

<!-- About Theme -->
<!--

    <a href="https://blog.viosey.com/index.php/Material.html" target="_blank" class="sidebar-footer-text-a">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
             sidebar.about_theme
            <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
    </a>

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div id="back-to-top" class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    

    <!-- Facebook -->
    

    <!-- Google + -->
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/seltonGitHub" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    
        <a href="https://www.zhihu.com/people/seltonzyf" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-zhihu">
                <span class="visuallyhidden">Zhihu</span>
            </button><!--
     --></a>
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
    
    <!-- V2EX -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©&nbsp;2018&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Selton Blog
            
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import JS File -->

    <script>lsloader.load("lazyload_js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==", true)</script>



    <script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>



    <script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>


<script type="text/ls-javascript" id="NProgress-script">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>





    <!-- Leancloud -->
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
    <script>
        AV.initialize('mKudodOwRnXiriu0X9QTbrOR-gzGzoHsz', '7p9Cqu1Elj8CixvXFtn9Flrj');
    </script>
    <script type="text/ls-javascript" id="leancloud-views-script">
    function showTime(Counter) {
        var query = new AV.Query(Counter);
        $('.leancloud-views_num').each(function() {
            var url = $(this).attr('id').trim();
            query.equalTo('url', url);
            query.find({
                success: function(results) {
                    if (results.length === 0) {
                        var content = '0 ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                        return;
                    }
                    for (var i = 0; i < results.length; i++) {
                        var object = results[i];
                        var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                    }
                },
                error: function(object, error) {
                    console.log('Error: ' + error.code + ' ' + error.message);
                }
            });
        });
    }

    function addCount(Counter) {
      var Counter = AV.Object.extend('Counter');
      url = $('.leancloud-views_num').attr('id').trim();
      title = $('.leancloud-views_num').attr('data-flag-title').trim();
      var query = new AV.Query(Counter);
      query.equalTo('url', url);
      query.find({
          success: function(results) {
            if (results.length > 0) {
                var counter = results[0];
                counter.fetchWhenSave(true);
                counter.increment('time');
                counter.save(null, {
                    success: function(counter) {
                        var content =  counter.get('time') + ' ' + $(document.getElementById(url)).text();
                        $(document.getElementById(url)).text(content);
                    },
                    error: function(counter, error) {
                        console.log('Failed to save Visitor num, with error message: ' + error.message);
                    }
                });
            } else {
              var newcounter = new Counter();
              newcounter.set('title', title);
              newcounter.set('url', url);
              newcounter.set('time', 1);
              newcounter.save(null, {
                  success: function(newcounter) {
                      console.log('newcounter.get(\'time\')='+newcounter.get('time'));
                      var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
                      $(document.getElementById(url)).text(content);
                  },
                  error: function(newcounter, error) {
                      console.log('Failed to create');
                  }
              });
            }
        },
        error: function(error) {
            console.log('Error:' + error.code + ' ' + error.message);
        }
      });
    }
    $(function() {
        var Counter = AV.Object.extend('Counter');
        if ($('.leancloud-views_num').length === 1) {
            addCount(Counter);
        } else if ($('.post-title-link').length > 1) {
            showTime(Counter);
        }
    });
</script>






   





<!-- UC Browser Compatible -->
<script>
	var agent = navigator.userAgent.toLowerCase();
	if(agent.indexOf('ucbrowser')>0) {
		document.write('<link rel="stylesheet" href="/css/uc.css">');
	   alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
	}
</script>

<!-- Import prettify js  -->


    
        <script>lsloader.load("hanabi","/js/hanabi-browser-bundle.js?Pki5+pzkluqu53g+ouMWpA==", true)</script>
    


<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
    $(window).on('load', function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });

    
    
        
        
        HanabiBrowser.start('pre code',true);
    
</script>

<!-- MathJax Load-->


<!-- Bing Background -->


<script type="text/ls-javascript" id="lazy-load">
    // Offer LazyLoad
    queue.offer(function(){
        $('.lazy').lazyload({
            effect : 'show'
        });
    });

    // Start Queue
    $(document).ready(function(){
        setInterval(function(){
            queue.execNext();
        },200);
    });
</script>

<!-- Custom Footer -->



<script>
    (function(){
        var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')

        for (var i = 0; i < scriptList.length; ++i) {
            var item = scriptList[i];
            lsloader.runInlineScript(item.id,item.id);
        }
    })()
console.log('\n %c © Material Theme | Version: 1.5.2 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>

                </main>
            </div>
        </body>
    
</html>
